<template>
  <!-- 投诉建议 -->
  <div>
    <div class="page_box">
      <window-title title="投诉建议"></window-title>
      <el-form label-position="left" :model="form" border >
        <el-row>
            <el-col :span="8">
            <el-form-item label="状态：" > 
              <el-select size="mini" v-model="form.state">
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="关键字检索：" label-width="100px">
              <el-input size="mini" v-model="form.keyWord"></el-input>
            </el-form-item>
          </el-col>
       
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-button size="mini" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 投诉列表 -->
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>-->
      <el-table
        :data="tableData"
        border
        size="mini"
        :header-cell-style="{background:'#f8f8f8',color:'#333',borderRight:0}"
      >
        <el-table-column type="index" label="序号" width="80"></el-table-column>

        <el-table-column prop="userName" label="用户名" width="180"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="100"></el-table-column>
        <el-table-column prop="realName" label="手机号" width="100"></el-table-column>
        <el-table-column prop="content" min-width="200" label="内容">
          <template slot-scope="scope">
            <el-popover placement="top" width="200" trigger="hover">
              <p>{{scope.row.content}}</p>
              <div slot="reference" class="complain_content">{{scope.row.content}}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="time" width="150" label="时间"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="lookDetail(scope.row)">详情</el-button>
            <el-dropdown size="mini" @click="handleClick" split-button @command="handleCommand">
              操作
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="处理">处理</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="current_page"
            :page-size="per_page"
            layout="total, prev, pager, next, jumper"
            :total="30"
          ></el-pagination>
        </div>
    </div>
    <el-dialog title="审核" :visible.sync="dialogHandle" width="30%" center>
      <el-form >
        <el-form-item label="状态：">
          <el-radio-group v-model="radio">
            <el-radio :label="3">未处理</el-radio>
            <el-radio :label="6">处理中</el-radio>
            <el-radio :label="9">已处理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注信息：">
          <el-input type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 详情弹窗 -->
    <el-dialog title="详情" :visible.sync="dialogDetail">
      <el-form :model="detailForm" label-width="100px">
        <el-form-item label="状态：">
          <el-radio-group  disabled>
            <el-radio :label="3">未处理</el-radio>
            <el-radio :label="6">处理中</el-radio>
            <el-radio :label="9">已处理</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名：">
          <span>{{detailForm.userName}}</span>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <span>{{detailForm.realName}}</span>
        </el-form-item>
        <el-form-item label="手机号：">
          <span>{{detailForm.phone}}</span>
        </el-form-item>
        <el-form-item label="时间：">
          <span>{{detailForm.time}}</span>
        </el-form-item>
        <el-form-item label="内容：">
          <el-input type="textarea" disabled v-model="detailForm.content"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
export default {
  components: { windowTitle },
  data() {
    return {
      current_page:1,
      per_page:10,
      detailForm:{},
      radio: 3,
      dialogDetail: false,
      dialogHandle: false,
      activeName: "1",
      tableData: [
        {
          userName: "是否",
          realName: "是否",
          phone:'1586895675',
          content: "骄傲加分加分",
          time: "2020-01-09 12:13:14",
          state: "已处理"
        },
        {
          userName: "是否",
          realName: "是否",
          phone:'1586895675',
          content: "骄傲加分加分骄傲",
          time: "2020-01-09 12:13:14",
          state: "未处理"
        },
        {
          userName: "是否",
          realName: "是否",
          phone:'1586895675',
          content: "骄傲加分加分",
          time: "2020-01-09 12:13:14",
          state: "处理中"
        }
      ],
      form: {
        keyWord: "",
        state: "全部"
      },
      options: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "已处理",
          label: "已处理"
        },
        {
          value: "处理中",
          label: "处理中"
        },
        {
          value: "未处理",
          label: "未处理"
        }
      ]
    };
  },
  methods: {
    handleClick() {
      this.dialogHandle = true;
    },
    handleCommand(e) {
      this.dialogHandle = true;
    },
    lookDetail (content) {
      console.log(content)
      this.dialogDetail = true
      this.detailForm = content
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/fade/dadeList.css");
</style>